<template>
    <div class="page">
        <m-header title="兑换USDT" :canback="Boolean(1)"></m-header>
        <section class="body">
            <form class="tj-form">
                <div class="form-item">
                    <label for="name">数量:</label>
                    <div class="num-list">
                      <div class="num-box" :class="{active:formData.card_num==item.num}" @click="formData.card_num=item.num;formData.usdt_num=item.momey" v-for="item in numList" :key="item.num">
                        <div class="num">{{item.num}}</div>
                        <div class="momey">{{item.momey}}USDT</div>
                      </div>
                    </div>
                    <!-- <input type="text" v-model="formData.num" placeholder="请选择要兑换的数量" readonly> -->
                </div>
                <div class="form-item" v-clipboard:copy="configData.url" v-clipboard:success="clipboardSuccess" >
                    <label for="name">平台USDT地址(点击复制):</label>
                    <input type="text"  v-model="configData.url" placeholder="请输入平台USDT地址" readonly>
                </div>
                <div class="form-item mar">
                    <label class="mar" for="name">充值付款截图:</label>
                    <div class="flex-box">
                        <img class="img" :src="formData.img_url?api+formData.img_url:upladSrc">
                        <input  class="file" type="file" @change="change($event)">
                        <img class="right" :src="api+configData.qrcode">
                    </div>
                </div>
                <button type="button" class="btn-submit btn-blue" @click="exchange">确认兑换</button>
            </form >
        </section>
        <m-load ref="load"></m-load>
    </div>
</template>
<script>
import {Index,Base} from '@/server/server.js';
import {mapGetters} from 'vuex';
import {Util,Load,HB} from '@/assets/commonjs/utils.js';
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

export default {
    name:"PayInfo",
    data(){
        return {
            upladSrc:require('@/assets/images/gzlz/upload.png'),
            myClipboard: null,
            numList:[
              {num:30,momey:76},
              {num:100,momey:241},
              {num:500,momey:1070}
            ],
            formData:{
              card_num:30,
              usdt_num:100,
              usdt_address:'',
              img_url:''
            },
            configData:{
                qrcode:'',
                url:''
            }
        }
    },
    directives: {
        clipboard
    },
    computed:{
        ...mapGetters(['uid','userInfo','stemp','api'])
    },
    mounted(){
        this.getRechargeConfig()
    },
    methods:{
        getRechargeConfig(){
            Load.loadStart(this);
            Index.getRechargeConfig().then(res=>{
                Load.loadEnd(this);
                if(res.code == 1){
                    this.configData = res.data
                }else {
                    mui.toast(res.msg);
                    return ;
                }
            })
        },
        change(event){
            let _This = this;
            let formData = new FormData();
            Load.loadStart(_This);
            Util.uploadImgLimit(event.target.files[0],url=>{
                formData.append('image',url);
                Base.upload(formData).then((res)=>{
                Load.loadEnd(_This);
                    if(res.code == 1){
                        this.formData.img_url = res.data;
                    }else {
                        mui.toast(res.msg);
                        return ;
                    }
                })
            })
        },
        exchange(){
          let msg = ''
          if(!this.formData.img_url ){
            msg='请上传充值付款截图'
          }
          if(msg){
            mui.toast(msg);
          }else {
            Load.loadStart(this);
            Index.rechargeSpeedCard(this.formData).then(res=>{
                if(res.code == 1){
                    setTimeout(() => {
                        mui.toast(res.msg);
                        Load.loadEnd(this);
                        this.$router.go(-1);
                    }, 1000);
                }else {
                    mui.toast(res.msg);
                    Load.loadEnd(this);
                    return ;
                }
            })
          }
        },
        // hbuilder 拍照
        upload(){
            let _this = this;
            HB.picForGallery(_this,url=>{
                if(_this.type == 'ali'){
                    _this.aliForm.alipayurl = url;
                }else if(_This.type == 'USDt'){
                    _this.usdtForm.usdt_url = url;
                }else {
                    _this.wechatForm.wechaturl = url;
                }
            })
            return ;
            HB.HBCapture(_this,url=>{
                if(_this.type == 'ali'){
                    _this.aliForm.alipayurl = url;
                }else if(_This.type == 'USDt'){
                    _this.usdtForm.usdt_url = url;
                }else {
                    _this.wechatForm.wechaturl = url;
                }
            })
        },
        clipboardSuccess() {
            mui.toast('復制成功！');
        },
        copy() {
            console.log(123456)
            this.myClipboard.on('success', (e) => {
                console.log(e)
                mui.toast('復制成功！');
            })
            this.myClipboard.on('error', (e) => {
                console.log(e)
                Util.commonCopy('url');
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~link-less';
    .body {
        // background-color: @bg-color;
        // padding: @padding-primary;
        .form-item {
            .img {
                border: 1px solid #f3f3f3;
            }
            .flex-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right {
                    width: 210px;
                    height: 210px;
                }
            }
        }
        .num-list {
          display: flex;
          align-items: center;
          margin: 20px 0;
          .num-box {
            flex: 1;
            text-align: center;
            color: #fff;
            padding: 10px 0;
            &.active {
              background-color: #4eba4c;
            }
          }
        }
    }
</style>
